<template>
  <el-container>
    <!-- 头部 -->
    <div id="bmap" class="bm-view"></div>
    <div class="abs left">
      <el-row>
        <el-col :span="24">
          <div>【项目信息】</div>
        </el-col>
      </el-row>
      <!-- <el-input
        placeholder="项目信息列表"
        v-model="filterText"
        suffix-icon="el-icon-search"
      >
      </el-input> -->
      <el-scrollbar style="height: 82.7vh; margin-top: 1rem">
        <el-tree
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          node-key="idx"
          :default-expanded-keys="[num]"
          accordion
          :filter-node-method="filterNode"
          ref="tree"
          @node-click="setCentPoint"
          default-expand-all
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
              <i :class="data.icon" :style="{ color: data.color }"></i
              >{{ node.label }}
            </span>
          </span>
        </el-tree>
      </el-scrollbar>
    </div>
    <div class="abs right">
      <div class="weather">
        <Weather></Weather>
      </div>
      <div class="nowDate">
        <div class="upData">【当前数据】</div>
        <el-scrollbar>
          <div class="table">
            <el-table :data="tableDate" class="customer-table">
              <el-table-column
                prop="label"
                label="站点"
                align="center"
                width="80"
              ></el-table-column>
              <el-table-column
                prop="realData"
                label="压强(kPa)"
                align="center"
                width="105"
              ></el-table-column>
              <el-table-column
                prop="nozzleHeight"
                label="水位高程(m)"
                align="center"
                width="105"
              ></el-table-column>
            </el-table>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </el-container>
</template>

<script>
import Weather from "@/components/Weathers";
import SiteOnline from "@/components/SiteOnlines";
import WarningStatistics from "@/components/WarningStatisticss";
import OverRun from "@/components/OverRuns";
import * as Axios from "../../api/myAxios";
import { kkCreateMap } from "../../api/action";
import { mapState } from "vuex";
import * as serviceApi from "../../common/service.config";
import moment from "moment";

export default {
  name: "SiteDistribution",
  components: {
    Weather,
    SiteOnline,
    WarningStatistics,
    OverRun,
  },
  data() {
    return {
      filterText: "",
      data: [],
      kkRes: null,
      defaultProps: {
        children: "children",
        label: "label",
      },
      map: null,
      bmap: null,
      point: "",
      mapMarkList: {
        groundTest: [], // 岩土
        // dipperTest: [], // 北斗
        // weatheTest: [], // 气象检测
      },
      defaultPoint: {
        lng: null,
        lat: null,
        centerZoom: null,
      },
      show: false,
      position: {},
      num: null,
      tableDate: [],
    };
  },
  created() {
    Axios.post().then((res) => {
      this.kkRes = res.data.parameter.list;
      let url = window.location.href;
      let id;
      if (this.kkRes.length == 1) {
        id = "1";
      } else {
        id = url.split("?")[1].split("=")[1];
      }
      switch (id) {
        case "1":
          this.defaultPoint.lng = this.kkRes[0].longitude;
          this.defaultPoint.lat = this.kkRes[0].latitude;
          this.defaultPoint.centerZoom = this.kkRes[0].defaultMapLevel - 1;
          this.num = this.kkRes[0].id;
          this.$store.dispatch("getNav", id);
          break;
      }
      kkCreateMap.defaultInfo.lat = this.defaultPoint.lat;
      kkCreateMap.defaultInfo.lng = this.defaultPoint.lng;
      kkCreateMap.defaultInfo.defaultMapLevel = this.defaultPoint.centerZoom;
      const mapDom = document.getElementById("bmap");
      kkCreateMap.init(mapDom);
      let inter = setInterval(() => {
        if (this.kkRes !== null) {
          kkCreateMap.setPointList(this.kkRes);
          clearInterval(inter);
        }
      });
      let siderList = [];
      for (let i = 0; i < this.kkRes.length; i++) {
        siderList.push({
          idx: this.kkRes[i].id,
          label: this.kkRes[i].monitorName,
          children: [
            { label: "渗压监测", children: [] },
            { label: "渗流监测", children: [] },
          ],
        });
        let siderListChildren = this.kkRes[i].sensorList;
        for (let k = 0; k < siderListChildren.length; k++) {
          siderListChildren[k].moduleEnum === "01" &&
          siderListChildren[k].sensorStatus === "10" &&
          siderListChildren[k].dataType === "03"
            ? siderList[i].children[0].children.push({
                label: siderListChildren[k].sensorName,
                icon: "iconfont icon-shan",
                color: "green",
                longitude: siderListChildren[k].xoriginal,
                latitude: siderListChildren[k].yoriginal,
                sensorName: siderListChildren[k].sensorName,
                moduleEnum: siderListChildren[k].moduleEnum,
                id: siderListChildren[k].id,
                baseId: siderListChildren[k].monitorId,
                monitorId: siderListChildren[k].monitorId,
                dataType: siderListChildren[k].dataType,
                realData: Number(siderListChildren[k].realData).toFixed(3),
                nozzleHeight: Number(siderListChildren[k].nozzleHeight).toFixed(
                  3
                ),
                creatTime: siderListChildren[k].creatTime,
                showDate: Number(siderListChildren[k].showDate),
              })
            : siderListChildren[k].moduleEnum === "01" &&
              siderListChildren[k].sensorStatus === "20" &&
              siderListChildren[k].dataType === "03"
            ? siderList[i].children[0].children.push({
                label: siderListChildren[k].sensorName,
                icon: "iconfont icon-shan",
                color: "yellow",
                longitude: siderListChildren[k].xoriginal,
                latitude: siderListChildren[k].yoriginal,
                sensorName: siderListChildren[k].sensorName,
                moduleEnum: siderListChildren[k].moduleEnum,
                dataType: siderListChildren[k].dataType,
                realData: Number(siderListChildren[k].realData).toFixed(3),
                nozzleHeight: Number(siderListChildren[k].nozzleHeight).toFixed(
                  3
                ),
                creatTime: siderListChildren[k].creatTime,
                showDate: Number(siderListChildren[k].showDate),
                id: siderListChildren[k].id,
                baseId: siderListChildren[k].monitorId,
                monitorId: siderListChildren[k].monitorId,
              })
            : siderListChildren[k].moduleEnum === "01" &&
              siderListChildren[k].sensorStatus === "30" &&
              siderListChildren[k].dataType === "03"
            ? siderList[i].children[0].children.push({
                label: siderListChildren[k].sensorName,
                icon: "iconfont icon-shan",
                color: "grey",
                longitude: siderListChildren[k].xoriginal,
                latitude: siderListChildren[k].yoriginal,
                sensorName: siderListChildren[k].sensorName,
                moduleEnum: siderListChildren[k].moduleEnum,
                dataType: siderListChildren[k].dataType,
                realData: Number(siderListChildren[k].realData).toFixed(3),
                nozzleHeight: Number(siderListChildren[k].nozzleHeight).toFixed(
                  3
                ),
                creatTime: siderListChildren[k].creatTime,
                showDate: Number(siderListChildren[k].showDate),
                id: siderListChildren[k].id,
                baseId: siderListChildren[k].monitorId,
                monitorId: siderListChildren[k].monitorId,
              })
            : siderListChildren[k].moduleEnum === "01" &&
              siderListChildren[k].sensorStatus === "10" &&
              siderListChildren[k].dataType === "05"
            ? siderList[i].children[1].children.push({
                label: siderListChildren[k].sensorName,
                icon: "iconfont icon-shan",
                color: "green",
                longitude: siderListChildren[k].xoriginal,
                latitude: siderListChildren[k].yoriginal,
                sensorName: siderListChildren[k].sensorName,
                moduleEnum: siderListChildren[k].moduleEnum,
                dataType: siderListChildren[k].dataType,
                realData: Number(siderListChildren[k].realData).toFixed(3),
                nozzleHeight: Number(siderListChildren[k].nozzleHeight).toFixed(
                  3
                ),
                creatTime: moment(siderListChildren[k].creatTime).format(
                  "YY-MM-DD HH:mm:ss"
                ),
                showDate: Number(siderListChildren[k].showDate),
                id: siderListChildren[k].id,
                baseId: siderListChildren[k].monitorId,
                monitorId: siderListChildren[k].monitorId,
              })
            : siderListChildren[k].moduleEnum === "01" &&
              siderListChildren[k].sensorStatus === "20" &&
              siderListChildren[k].dataType === "05"
            ? siderList[i].children[1].children.push({
                label: siderListChildren[k].sensorName,
                icon: "iconfont icon-shan",
                color: "yellow",
                longitude: siderListChildren[k].xoriginal,
                latitude: siderListChildren[k].yoriginal,
                sensorName: siderListChildren[k].sensorName,
                moduleEnum: siderListChildren[k].moduleEnum,
                dataType: siderListChildren[k].dataType,
                realData: Number(siderListChildren[k].realData).toFixed(3),
                nozzleHeight: Number(siderListChildren[k].nozzleHeight).toFixed(
                  3
                ),
                creatTime: moment(siderListChildren[k].creatTime).format(
                  "YY-MM-DD HH:mm:ss"
                ),
                showDate: Number(siderListChildren[k].showDate),
                id: siderListChildren[k].id,
                baseId: siderListChildren[k].monitorId,
                monitorId: siderListChildren[k].monitorId,
              })
            : siderList[i].children[1].children.push({
                label: siderListChildren[k].sensorName,
                icon: "iconfont icon-shan",
                color: "grey",
                longitude: siderListChildren[k].xoriginal,
                latitude: siderListChildren[k].yoriginal,
                sensorName: siderListChildren[k].sensorName,
                moduleEnum: siderListChildren[k].moduleEnum,
                dataType: siderListChildren[k].dataType,
                realData: Number(siderListChildren[k].realData).toFixed(3),
                nozzleHeight: Number(siderListChildren[k].nozzleHeight).toFixed(
                  3
                ),
                creatTime: moment(siderListChildren[k].creatTime).format(
                  "YY-MM-DD HH:mm:ss"
                ),
                showDate: Number(siderListChildren[k].showDate),
                id: siderListChildren[k].id,
                baseId: siderListChildren[k].monitorId,
                monitorId: siderListChildren[k].monitorId,
              });
        }
        // 压强和水位高程为NaN时 显示为"/"
        for (let j = 0; j < siderList[i].children[0].children.length; j++) {
          if (siderList[i].children[0].children[j].realData == "NaN") {
            siderList[i].children[0].children[j].realData = "/";
          }
          if (siderList[i].children[0].children[j].nozzleHeight == "NaN") {
            siderList[i].children[0].children[j].nozzleHeight = "/";
          }
        }
        this.tableDate.realData = siderList[i].children[0].children.realData;
        this.tableDate.nozzleHeight =
          siderList[i].children[0].children.nozzleHeight;
        this.tableDate = siderList[i].children[0].children;
      }
      this.data = siderList;
    });
  },
  mounted() {
    this.$store.dispatch("getData").then(() => {
      window.localStorage.setItem(
        "treeData",
        JSON.stringify({ treeData: this.treeData })
      );
    });
    this.expandRoot();
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      let if_one = data.label.indexOf(value) !== -1;
      let if_two =
        node.parent &&
        node.parent.data &&
        node.parent.data.label &&
        node.parent.data.label.indexOf(value) !== -1;
      let if_three =
        node.parent &&
        node.parent.parent &&
        node.parent.parent.data &&
        node.parent.parent.data.label &&
        node.parent.parent.data.label.indexOf(value) !== -1;
      let result_one = false;
      let result_two = false;
      let result_three = false;
      if (node.level === 1) {
        result_one = if_one;
      } else if (node.level === 2) {
        result_two = if_one || if_two;
      } else if (node.level === 3) {
        result_three = if_one || if_two || if_three;
      }
      return result_one || result_two || result_three;
    },
    expandRoot() {
      if (this.$refs.tree.root.childNodes) {
        this.$refs.tree.root.expanded = true;
        this.$refs.tree.root.childNodes.forEach(
          (node) => (node.expanded = true)
        );
      }
    },
    setCentPoint(event, selected) {
      let parameter = {
        id: null,
        moduleEnum: null,
        longitude: null,
        latitude: null,
        sensorName: null,
        showDate: null,
        dataType: null,
        realData: null,
        nozzleHeight: null,
        sensorNumber: null,
        monitorId: null,
      };
      /* 选中节点的id */

      parameter.id = event.id;
      //监测主题
      parameter.moduleEnum = event.moduleEnum;
      //经度
      parameter.longitude = event.longitude;
      //纬度
      parameter.latitude = event.latitude;
      //传感器名
      parameter.sensorName = event.sensorName;
      //展示数据
      parameter.showDate = event.showDate;
      parameter.dataType = event.dataType;
      parameter.realData = event.realData;
      parameter.nozzleHeight = event.nozzleHeight;
      parameter.sensorNumber = event.sensorNumber;
      parameter.monitorId = event.monitorId;
      kkCreateMap.setMapCenter(parameter);
      this.$store.dispatch("getChart", event.baseId);
    },
  },
  computed: {
    ...mapState(["treeData"]),
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
};
</script>

<style lang='less' scoped>
.el-container {
  width: 100%;
  height: 100%;
  .bm-view {
    width: 100%;
    height: 100%;
    /deep/ .anchorBL {
      display: none;
      visibility: hidden;
    }
  }
  .abs {
    position: absolute;
  }
  .el-col > div {
    text-align: center;
    width: 12vw;
    line-height: 1.5;
    background: rgba(107, 151, 160, 0.5);
    color: #15f7ff;
    font-size: 1.5rem;
    margin: 0 auto;
    margin-top: 10px;
  }
  .left {
    left: 0;
    top: 3.8rem;
    width: 16vw;
    height: 93vh;
    background: linear-gradient(to right, rgb(15, 14, 14), transparent);
  }

  // .el-input {
  //   width: 80%;
  //   margin: 10px 0;
  //   margin-left: 20px;
  // }
  // .el-input /deep/ .el-input__inner {
  //   color: white;
  //   background-color: transparent;
  // }
  .el-scrollbar /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
    border: none;
  }
  .el-tree {
    background-color: transparent;
    color: white;
    margin-left: 30px;
  }
  .el-tree /deep/ .el-tree-node__content:hover {
    background: transparent;
  }
  .el-tree /deep/ .el-tree-node:focus > .el-tree-node__content {
    background: transparent;
  }
  .el-tree /deep/ .custom-tree-node:hover {
    background-color: #d0c199;
  }
  .el-tree
    /deep/
    .el-tree-node:focus
    > .el-tree-node__content
    .custom-tree-node {
    background-color: #31554c;
  }
  /* .el-tree /deep/ .el-tree-node__expand-icon::before {
    display: none;
  } */

  .right {
    right: 0;
    top: 3.85rem;
    width: 20vw;
    height: 93vh;
    background: linear-gradient(to left, rgb(15, 14, 14), transparent);
    overflow: hidden;
    .nowDate {
      height: 52vh;
      .upData {
        text-align: center;
        width: 14vw;
        line-height: 1.5;
        background: rgba(107, 151, 160, 0.5);
        color: #15f7ff;
        font-size: 1.5rem;
        margin: 0 auto;
        margin-top: 38vh;
      }
      .el-scrollbar {
        max-width: 20vw;
        min-width: 17vw;
        margin-top: 1vh;
        margin-left: 1vw;
        height: 47vh;
        overflow-x: hidden;
        /*最外层透明*/
        /deep/ .el-table,
        /deep/ .el-table--fit,
        /deep/ .el-table__expanded-cell {
          background-color: transparent !important;
          color: #fff;
        }
        /* 表格内背景颜色 */
        /deep/ .el-table th,
        /deep/ .el-table tr,
        /deep/ .el-table td {
          background-color: transparent !important;
          color: #fff;
        }
        // 去掉表格单元格边框
        /deep/.customer-table th {
          border: none;
        }
        /deep/.customer-table td,
        /deep/.customer-table th.is-leaf {
          border: none;
        }
        // 表格最外边框
        /deep/.el-table--border,
        /deep/.el-table--group {
          border: none;
        }
        // 表格最外层边框-底部边框
        /deep/.el-table--border::after,
        /deep/.el-table--group::after {
          width: 0;
        }
        /deep/.customer-table::before {
          width: 0;
        }
        /deep/.customer-table .el-table__fixed-right::before,
        /deep/.el-table__fixed::before {
          width: 0;
        }
      }
    }
  }
}
</style>